<!--类目管理 -->
<template>
  <div class="category">
    <el-container>
      <el-header>
        <div class="leftBox">
          <el-button
            type="danger"
            icon="el-icon-delete"
            plain
            title="批量删除"
            @click="deleteAll()"
          >批量删除</el-button>
          <el-input
            placeholder="请输入类别名称"
            v-model="searchCategory"
            class="input-with-select"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            title="点击搜索"
            @click="searchCategoryList()"
            >点击搜索</el-button
          >
          <el-button
            icon="el-icon-plus"
            type="primary"
            plain
            title="添加类目"
            @click="dialogVisible = true"
            >添加类目</el-button
          >
          <el-dialog title="添加类目" :visible.sync="dialogVisible" width="30%">
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="addForm"
            >
              <el-form-item label="类目名称">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
              <el-form-item label="类目描述">
                <el-input
                  type="textarea"
                  placeholder="请填写该类目的相关描述"
                  auto-complete="on"
                  v-model="addForm.description"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addCategoryList()"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <el-button
            type="success"
            icon="el-icon-refresh"
            title="刷新"
            style="margin-left:14px"
            @click="refresh()"
            >刷新</el-button
          >
        </div>
      </el-header>
      <el-main>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <span class="total">共有数据 {{totalSize}} 条</span>
        <template>
          <el-table
            :data="tableData"
            style="width: 100%;margin-top:2%;"
            show-overflow-tooltip="true"
          >
            <el-table-column
              align ="center"
              width = "60">
              <template slot-scope="scope">
                <el-checkbox-group v-model="checkedId" @change="handleCheckedChange">
                  <el-checkbox :key="scope.row.id" :label="scope.row.id">{{""}}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
            <el-table-column label="类名ID" prop="id"></el-table-column>
            <el-table-column label="类别名" prop="name"></el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
            ></el-table-column>
            <el-table-column
              label="更新时间"
              prop="_updateTime"
            ></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="
                    handleEdit(scope.$index, scope.row), (dialogVisible1 = true)
                  "
                  >修改</el-button
                >
                <el-dialog
                  title="修改类目"
                  :visible.sync="dialogVisible1"
                  width="60%"
                >
                  <el-form
                    :label-position="labelPosition"
                    label-width="80px"
                    :model="fixForm"
                  >
                    <el-form-item label="类目名称">
                      <el-row>
                        <el-col>
                          <el-input
                            v-model="fixForm.name"
                            placeholder="请输入该商品的名称"
                            auto-complete="on"
                          ></el-input>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item label="描述">
                      <el-row>
                        <el-col>
                          <el-input
                            type="textarea"
                            v-model="fixForm.description"
                            placeholder="请填写该类目的相关描述"
                            auto-complete="on"
                          ></el-input>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="fixCategoryList()"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <el-button
                  size="mini"
                  type="danger"
                  @click.native.prevent="
                    handleDelete(scope.$index, scope.row.id)
                  "
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
      <el-footer>
        <el-button @click="pre" :disabled="preBool">上一页</el-button>
        <el-input
          v-model="pageNum"
          readonly="readonly"
          style="width:60px;"
        ></el-input>
        <el-button @click="add" :disabled="addBool">下一页</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Category",
  data() {
    return {
      searchCategory: "",
      labelPosition: "right",
      dialogVisible: false,
      dialogVisible1: false,
      addForm: {},
      tableData: [],
      fixForm: {},
      // 分页
      pageNum: 1,
      addBool: false,
      preBool: true,
      pageSize: 10,
      totalPages: "",
      totalSize: "",
      pages: "",

      // 全选
      checkAll: false,
      checkedId: [],
      isIndeterminate: true,
    };
  },
  created() {
    this.getCategoryList();
  },
  watch: {
    pageNum: function(Val) {
      if (Val === 1) {
        this.preBool = true;
        this.addBool = false;
      } else if (Val === this.totalPages) {
        this.addBool = true;
        this.preBool = false;
      } else {
        this.preBool = false;
        this.addBool = false;
      }
    }
  },
  components: {},

  filters: {},

  computed: {},

  methods: {
    handleCheckedChange(value = []) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
      console.log(this.checkedId)
    },
    handleCheckAllChange(val) {
      this.checkedId = []
      this.checkAll = val;
      this.isIndeterminate = !val;
      if(this.checkAll) {
        this.tableData.forEach(data => {
          this.checkedId.push(data.id);
        });
      }
      console.log(this.checkedId)
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.fixForm = row;
    },
    handleDelete(index, id) {
      console.log(index, id);
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteCategoryList(index, id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add() {
      if (this.pageNum < this.totalPages) {
        this.pageNum++;
        this.getCategoryList();
      } else {
        this.addBool = true;
      }
    },
    pre() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.getCategoryList();
      } else {
        this.preBool = true;
      }
    },
    Success(index) {
      this.$message.success(index);
    },
    Fail(index) {
      this.$message.error(index);
    },
    refresh() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.searchCategory = "";
      this.getCategoryList();
    },
    getCategoryList() {
      this.axios
        .put("/api/goodsCategory", {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            let list = res.data.data;
            this.totalPages = list.totalPages;
            this.totalSize = list.totalSize;
            this.pageNum = list.pageNum;
            this.pageSize = list.pageSize;
            for (let item of list.content) {
              item._updateTime = item.updateTime ? item.updateTime : "暂无更新";
            }
            this.tableData = list.content;
          }else{
            this.totalPages = 0;
            this.totalSize = 0;
            this.tableData = [];
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    addCategoryList() {
      if (this.addForm.name === "" || this.addForm.description === "") {
        this.Fail("信息不足，无法添加");
      } else {
        this.axios
          .post("/api/goodsCategory", {
            name: this.addForm.name,
            description: this.addForm.description
          })
          .then(res => {
            console.log(res.data);
            if (res.data.data === "保存成功") {
              this.Success("添加成功");
              this.getCategoryList();
              this.dialogVisible = false;
            } else {
              this.Fail("添加失败");
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    fixCategoryList() {
      if (
        this.fixForm.id === "" ||
        this.fixForm.name === "" ||
        this.fixForm.description === ""
      ) {
        this.Fail("信息不足，无法修改");
      } else {
        this.axios
          .post("/api/goodsCategory", {
            id: this.fixForm.id,
            name: this.fixForm.name,
            description: this.fixForm.description
          })
          .then(res => {
            console.log(res.data);
            if (res.data.data === "更新成功") {
              this.Success("更新成功");
              this.getCategoryList();
              this.dialogVisible1 = false;
            } else {
              this.Fail("更新失败");
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    searchCategoryList() {
      if (this.searchCategory != "") {
        this.axios
          .put("/api/goodsCategory", {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.searchCategory
          })
          .then(res => {
            // console.log(res.data);
            if (res.data.code === 200) {
              let list = res.data.data;
              this.totalPages = list.totalPages;
              this.totalSize = list.totalSize;
              this.pageNum = list.pageNum;
              this.pageSize = list.pageSize;
              for (let item of list.content) {
                item._updateTime = item.updateTime
                  ? item.updateTime
                  : "暂无更新";
              }
              this.tableData = list.content;
              this.Success("查询成功");
            } else {
              this.Fail("查询失败");
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
      else{
        this.Fail("请输入您要搜索的内容");
      }
    },
    deleteCategoryList(index, id) {
      this.axios
        .delete("/api/goodsCategory", {
          params: {
            ids: id
          }
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.Success("删除成功");
            this.tableData.splice(index, 1);
            this.getCategoryList();
          } else {
            this.Fail("删除失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteAll() {
      var data = {
        ids: this.checkedId
      }
      var params = this.qs.stringify(data, { indices: false })
      this.axios.delete('/api/goodsCategory?'+params
      ).then(response => {
        console.log(response);
        if(response.data.code == 200) {
          this.getCategoryList();
          this.Success("删除成功");
        } else {
          this.Fail("删除失败");
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
};
</script>
<style scoped>
.total {
  font-size: 14px;
  margin-left: 50px;
  color: #606266;
}
.category {
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
  width: 100%;
}
.el-main {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.el-header {
  line-height: 60px;
}
.el-footer {
  line-height: 60px;
  text-align: right;
}
.leftBox {
  line-height: 60px;
  height: 60px;
  /* float: right; */
  width: 100%;
  text-align: left;
}
.leftBox .el-button {
  margin-right: 10px;
}
.leftBox .el-input {
  margin-right: 14px;
  width: 220px;
}
</style>